<template>
	<div class="wrapper">
		<div class="dis">
			<div class="main">
				<div class="" style="display: flex;align-items: center;justify-content: space-between;">
					<div class="" style="display: flex;">
						<img src="@/assets/card/bank.png" alt="" />
						<div class="card_info">
							<div class="">
								{{list.bankCardName}}
							</div>
							<div class="card_info_a">
								储蓄卡
							</div>
							<div class="card_info_b" v-if="list.bankCardNo!=''">
								{{list.bankCardNo.slice(0,4)}}*****{{list.bankCardNo.slice(-4)}}
							</div>
						</div>
						
					</div>
					<div class="dia" @click="alteration()">
						<div class="">
							去变更
						</div>
						<div class="dis">
							<img src="@/assets/card/arrow.png" alt="" class="arrow" />
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import {
		selectAgentInf
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRouter()
			const state = reactive({
				list: ''
			})
			const alteration=()=>{
				router.push({
					path:"/debitCard"
				})
			}
			//获取卡信息
			const getList = () => {
			    selectAgentInf({
			       
			    }).then(res => {
			        state.list=res.data
			    })
			}
			getList()
			return {
				...toRefs(state),
				getList,
				alteration
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper{
		background-color: #fff;
		min-height: 100vh;
		height: 100%;
		.main{
			width: 335px;
			// height: 117px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 14px;
			color: #333333;
			padding:23px 15px;
			box-sizing: border-box;
			background: #FFBD4B;
			box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.11);
			border-radius: 6px;
			margin-top: 12px;
			.arrow{
				width: 18px;
				height: 18px;
			}
			.card_info{
				margin-left: 11px;
				.card_info_a{
					font-size: 12px;
					margin-top: 14px;
				}
				.card_info_b{
					font-size: 12px;
					margin-top: 8px;
				}
			}
			img{
				width: 20px;
				height: 20px;
			}
		}
	}
	
</style>